<template>
  <div
    name="fade"
    tabindex="-1"
    v-show="show"
    @keyup.esc="onEsc"
    class="swpie"
  >
    <div class="mask" @click="$emit('hide')" />
    <div class="img-show">
      <span class="vodal-close" @click="$emit('hide')" />
      <!-- swiper1 -->
      <swiper :options="swiperOptionTop" class="gallery-top" ref="swiperTop">
        <swiper-slide v-for="item in images" :key="item.id" v-bind:style="{backgroundImage: 'url(' + $store.state.baseImgUrl+item.photoKey + ')'}"></swiper-slide>
        <div class="swiper-button-next swiper-button-white" slot="button-next"></div>
        <div class="swiper-button-prev swiper-button-white" slot="button-prev"></div>
      </swiper>
      <!-- swiper2 Thumbs -->
      <!--<swiper :options="swiperOptionThumbs" class="gallery-thumbs" ref="swiperThumbs">
        <swiper-slide v-for="item in images" :key="item.id" v-bind:style="{backgroundImage: 'url(' + $store.state.baseImgUrl+item.photoKey + ')'}"></swiper-slide>
      </swiper>-->
    </div>

  </div>
</template>

<script>

  export default {
    props: {
      show: {
        type: Boolean,
        required: true
      }
    },
    data() {
      return {
        swiperOptionTop: {
          notNextTick: true,
          nextButton: '.swiper-button-next',
          prevButton: '.swiper-button-prev',
          spaceBetween: 10,
          onReachEnd: swiper => {
              this.getPhotos();
          }
        },
        /*swiperOptionThumbs: {
          notNextTick: true,
          spaceBetween: 10,
          centeredSlides: true,
          slidesPerView: 'auto',
          touchRatio: 0.2,
          slideToClickedSlide: true
        },*/
        isEnd: false,
        loading: true,
        images: [],
        index: 0,
      }
    },
    computed: {
      swiper() {
        return this.$refs.swiperTop.swiper
      }
    },
    mounted() {
      /*const swiperTop = this.$refs.swiperTop.swiper
      const swiperThumbs = this.$refs.swiperThumbs.swiper
      swiperTop.params.control = swiperThumbs
      swiperThumbs.params.control = swiperTop*/
//      this.swiper.slideTo(0, 0, false);
    },

    methods: {
      onEsc() {
        this.show && this.$emit('hide');
      },
      async getPhotos(){
        if (!this.isEnd && this.loading){
          this.loading = false;
          let offset = this.images.length;

          let url = "/v1/photo?albumId=" + this.$store.state.albumDetail.id
            + "&start=" + offset
            + "&length=" + this.$store.state.length
          let res = ""
          await this.axios.get(url)
            .then(response => {
              res = response.data;
            })
          if (res.result.length > 0){
            this.images = [...this.images, ...res.result];
            this.loading = true;
          }

          if (res.result.length < this.$store.state.length) {
            this.isEnd = true;
            return
          }
        }

      },
      sildeTo(index, images){
        if (this.images.length < index+1){
          this.images = images;
          setTimeout(() => {
            this.$refs.swiperTop.swiper.slideTo(index, 0, false);
          }, 50);
        }else{
          this.$refs.swiperTop.swiper.slideTo(index, 0, false);
        }
      }

    },
    watch: {
      show(show) {
        show && this.$nextTick(() => {
          this.$el.focus();
        })
      }
    },

  }
</script>

<style lang="scss" scoped>
  .mask {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    background: rgba(55, 55, 55, .8);
  }

  .swpie{
    position: fixed;
  }

  .img-show {
    position: fixed;
    top:10%;
    height: 80%;
    width: 100%;
    z-index: 101;
  }

  .swiper-container {
    background-color: #000;
  }
  .swiper-slide {
    /*background-size: cover;*/
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: center;
  }
  .gallery-top {
    height: 100%!important;
    width: 100%;
  }
  /*.gallery-thumbs {
    height: 20%!important;
    box-sizing: border-box;
    padding: 10px 0;
  }
  .gallery-thumbs .swiper-slide {
    width: 25%;
    height: 100%;
    opacity: 0.4;
  }
  .gallery-thumbs .swiper-slide-active {
    opacity: 1;
  }*/

  .vodal-close {
    position: absolute;
    cursor: pointer;
    top: 16px;
    right: 16px;
    width: 16px;
    height: 16px;
    z-index: 101;
  }

  .vodal-close:before,
  .vodal-close:after {
    position: absolute;
    content: '';
    height: 2px;
    width: 100%;
    top: 50%;
    left: 0;
    margin-top: -1px;
    background: #999;
    border-radius: 100%;
    -webkit-transition: background .2s;
    transition: background .2s;
  }

  .vodal-close:before {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
  }

  .vodal-close:after {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
  }

  .vodal-close:hover:before,
  .vodal-close:hover:after {
    background: #333;
  }

  /* -- fade -- */
  @-webkit-keyframes fade-enter {
    from {
      opacity: 0;
    }
  }

  @keyframes fade-enter {
    from {
      opacity: 0;
    }
  }

  .fade-enter-active {
    -webkit-animation:fade-enter both ease-in;
    animation: fade-enter both ease-in;
  }

  @-webkit-keyframes fade-leave {
    to {
      opacity: 0
    }
  }

  @keyframes fade-leave {
    to {
      opacity: 0
    }
  }

  .fade-leave-active {
    -webkit-animation: fade-leave both ease-out;
    animation: fade-leave both ease-out;
  }
</style>
